---
title: Podpowiedź aplikacji
image: /images/user-guide/tips/light-bulb.png
---

<Frame>
  <img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
</Frame>

Krótka wiadomość, która wyświetla dodatkowe informacje, gdy użytkownik wchodzi w interakcję z elementem.

<Tabs>
<Tab title="Usage">

```jsx
import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";

export const MyComponent = () => {
  return (
    <>
      <p id="hoverText" style={{ display: "inline-block" }}>
        Customer Insights
      </p>
      <AppTooltip
        className
        anchorSelect="#hoverText"
        content="Explore customer behavior and preferences"
        delayHide={0}
        offset={6}
        noArrow={false}
        isOpen={true}
        place="bottom"
        positionStrategy="absolute"
      />
    </>
  );
};
```

</Tab>

<Tab title="Props">

| Właściwości (Props) | Typ                                         | Opis                                                                                                                                                                                                                 |
| -------------------------------------- | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| nazwaKlasy                             | ciąg znaków                                 | Opcjonalna klasa CSS do dodatkowego stylowania                                                                                                                                                                       |
| selektorKotwicy                        | selektor CSS                                | Selektor kotwicy podpowiedzi (element, który uruchamia podpowiedź)                                                                                                                                |
| zawartość                              | ciąg znaków                                 | Zawartość, którą chcesz wyświetlić w podpowiedzi                                                                                                                                                                     |
| opóźnienieUkrycia                      | numer                                       | Opóźnienie w sekundach przed ukryciem podpowiedzi po opuszczeniu kotwicy przez kursor                                                                                                                                |
| przesunięcie                           | numer                                       | Przesunięcie w pikselach do pozycjonowania podpowiedzi                                                                                                                                                               |
| bezStrzałki                            | boolean                                     | Jeśli „true”, ukrywa strzałkę na podpowiedzi                                                                                                                                                                         |
| jestOtwarty                            | boolean                                     | Jeśli „true”, podpowiedź jest domyślnie otwarta                                                                                                                                                                      |
| miejsce                                | `PlacesType` string z `react-tooltip`       | Określa umiejscowienie podpowiedzi. Wartości obejmują `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, i `left-end` |
| strategiaPozycjonowania                | `PositionStrategy` string z `react-tooltip` | Strategia pozycjonowania dla podpowiedzi. Ma dwie wartości: `absolute` i `fixed`                                                                                                     |

</Tab>

</Tabs>

## Przepełnienie tekstu z podpowiedzią

Obsługuje przepełnienie tekstu i wyświetla podpowiedź, gdy tekst jest przepełniony.

<Tabs>
<Tab title="Usage">

```jsx
import { OverflowingTextWithTooltip } from 'twenty-ui/display';

export const MyComponent = () => {
  const crmTaskDescription =
    'Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.';

  return <OverflowingTextWithTooltip text={crmTaskDescription} />;
};
```

</Tab>

<Tab title="Props">

| Właściwości (Props) | Typ         | Opis                                                                |
| -------------------------------------- | ----------- | ------------------------------------------------------------------- |
| tekst                                  | ciąg znaków | Zawartość, którą chcesz wyświetlić w obszarze przepełnionego tekstu |

</Tab>

</Tabs>
